<template>
  <div class="page-wrapper">
    <div class="page">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>茶叶数据</el-breadcrumb-item>
        <el-breadcrumb-item>中老期茶叶数据</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- Tab -->
      <el-tabs v-model="dataType" @tab-click="changeType" class="data-tabs">
        <el-tab-pane v-for="(item, i) in teaDataTypes.TypeArray" :key="i" :name="item.KeyId">
          <span slot="label">{{item.Value}}</span>
          <div class="data-table">
            <div class="t-hd">
              <div class="t-hd-item name">商品名称</div>
              <div class="t-hd-item price">参考价</div>
              <div class="t-hd-item range">升跌幅度</div>
              <div class="t-hd-item percentage">升跌百分比</div>
              <div class="t-hd-item year">年份</div>
              <div class="t-hd-item update">更新日期</div>
            </div>
            <div class="t-bd">
              <div class="t-case" v-for="(item, index) in dataList" :key="index">
                <div class="t-bd-item name">{{item.productName}}</div>
                <div class="t-bd-item price">¥ {{item.price}}</div>
                <div class="t-bd-item range">{{item.priceChangeDesc}}</div>
                <div class="t-bd-item percentage">
                  <span class="icon" :class="item.priceChangeType == 3 ? 'down' : item.priceChangeType == 2 ? 'rise' : 'still'"></span>
                  {{item.priceChangePercentage}}
                </div>
                <div class="t-bd-item year">{{item.years}}</div>
                <div class="t-bd-item update">{{new Date(item.updateTime).toLocaleDateString()}}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <v-pagination ref="pagination" v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
    </div>
  </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
import { teaDataTypes } from '@/util/enums'
export default {
  data () {
    return {
      dataType: '1',
      teaDataTypes: teaDataTypes,
      dataList: [],
      page: Number(this.$route.query.pg) || 1,
      pageSize: Number(this.$route.query.size) || 30,
      total: 0
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取数据
    getData () {
      this.$http.post(this.$api + '/pc/data/analysisData', {
        dataType: Number(this.dataType),
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.responseCode === '0000') {
          this.dataList = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    // 切换分类
    changeType () {
      this.page = 1
      this.getData()
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.page-wrapper {
  background: #fff;
  overflow: hidden;
}
.breadcrumb {
  margin: 20px 0;
}
.data-tabs .el-tabs__header {
  margin-bottom: 20px;
}
.data-table {
  width: 100%;
  font-size: 14px;
  text-align: left;
  .name {
    padding-left: 40px;
    padding-right: 100px;
    flex: 3;
  }
  .price, .range, .percentage, .year, .update {
    flex: 1;
  }
  .t-hd {
    display: flex;
    height: 45px;
    align-items: center;
    color: #333;
    background: #f5f5f7;
  }
  .t-bd {
    .t-case {
      display: flex;
      padding: 15px 0;
      align-items: center;
      font-size: 14px;
      color: #666;
      line-height: 18px;
      border-bottom: 1px solid #f0f0f0;
      &:nth-of-type(odd) {
        background: #fcfcfc;
      }
      &:hover {
        background: #f0f0f5;
      }
    }
  }
  .icon {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 2px;
    width: 13px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    &.rise {
      background-image: url(../../assets/images/rise.png);
    }
    &.down {
      background-image: url(../../assets/images/down.png);
    }
    &.still {
      opacity: 0;
    }
  }
}
</style>
